<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>19-天猫案例</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration:none;
			}
			body{
				background:#ffffff;
				font-family: "microsoft yahei";
				line-height: 1;
			}
			li{
				list-style:none;
			}
			.box{
				background:#f3f3f3;
				width: 384px;
				height:508px;
				margin:30px auto;
				border-radius:8px;
			}
			.box .avatar{
				height:125px;
				padding:20px 0 0 0;
				box-sizing: border-box;
			}
			.box .avatar img{
				margin-top:20px;
				display: block;
				width:80px;
				height:80px;
				margin:0 auto;
			}
			.box .avatar div.author{
				color:#333333;
				font-size:9px;
				text-align: center;
				margin-top:14px;
			}
			.banner{
				text-align:center;
				/* 设置高 */
				height: 141px;
				margin-top:18px;
			}
			.banner img{
				width:356px;
				height:141px;
				border-radius: 4px;
				vertical-align: top;
			}
			.box p:nth-of-type(1){
				margin:27px 0 0 14px;
			}
			.box p:nth-of-type(1) span:nth-child(1){
				color: #000000;
				font-size:14px;
				vertical-align:top;
			}
			.box p:nth-of-type(1) span:nth-child(2){
				color: #666666;
				font-size:14px;
				vertical-align:top;	
			}
			.box p:nth-of-type(2),.box p:nth-of-type(3),.box p:nth-of-type(4){
				margin: 10px 0 0px 14px;
			}
			.box p:nth-of-type(2) span:nth-child(1),.box p:nth-of-type(3) span:nth-child(1),.box p:nth-of-type(4) span:nth-child(1){
				color: #000000;
				font-size:12px;
				width:32px;
				height:18px;
				display: inline-block;
				line-height: 18px;
				text-align: center;
				color:#fe0137;
				background: #f5e5e5;
			}
			.box p:nth-of-type(2) span:nth-child(2),.box p:nth-of-type(3) span:nth-child(2),.box p:nth-of-type(4) span:nth-child(2){
				color: #666666;
				font-size:14px;	
			}
			
			.box .bottom{
				margin-top:32px;
			}
			.box .bottom .item{
				width: 25%;
				height:45px;
				float: left;
				
			}
			.box .bottom .item img{
				display:block;
				width:23px;
				height:23px;
				margin:0 auto;
			}
			.box .bottom .item p{
				color:#000000;
				font-size:12px;
				text-align: center;
				margin:10px 0 0 0!important;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- avatar -->
			<div class="avatar">
				<img src="images/avatar.png" alt="">
				<div class="author">Hi! zyg0319019</div>
			</div>
			<!-- avatar_end -->
			<div class="banner">
				<img src="images/tm.png" alt="">
			</div>
			<p>
				<span>公告</span>
				<span>新鲜事儿都在这里～</span>
			</p>
			<p>
				<span>热点</span>
				<span>设计创享家3D设计服务大赛来袭！</span>
			</p>
			<p>
				<span>热点</span>
				<span>全球新发现，好物开抢就现在！</span>
			</p>
			<p>
				<span>热点</span>
				<span>万款新品流行速递抢先看</span>
			</p>
			<!-- 底部 -->
			<div class="bottom">
				<div class="item">
					<img src="images/sj_06.png" alt="">
					<p>收藏的宝贝</p>
				</div>
				<div class="item">
					<img src="images/sj_03.png" alt="">
					<p>买过的店铺</p>
				</div>
				<div class="item">
					<img src="images/sj_09.png" alt="">
					<p>收藏的店铺</p>
				</div>
				<div class="item">
					<img src="images/sj_11.png" alt="">
					<p>我的足迹</p>
				</div>
			</div>
			<!-- 底部end -->
		</div>
		
	</body>
</html>
